<template>
    <div class="goods-detail">
        <el-dialog title="选择商品规格" :visible.sync="dialogVisible" width="50%">
            <div class="content">
                <div class="left">
                    <img :src="goods.productImg" alt="">
                </div>
                <div class="right">
                    <div class="title">{{ goods.productName }}</div>
                    <div class="saleNum">已售 {{ goods.saleNum || 0 }} </div>

                    <div class="price">
                        <span>￥</span>{{ price }}<i v-if="price == goods.price">起</i>
                    </div>
                    <div class="select">
                        <el-row :gutter="1">
                            <el-col :span="4">快 递：</el-col>
                            <el-col :span="20">免运费 预计19小时内发货｜承诺48小时内发货</el-col>
                        </el-row>
                        <el-row :gutter="1">
                            <el-col :span="4">保 障：</el-col>
                            <el-col :span="20">产地直发 坏单包退 生鲜极速退</el-col>
                        </el-row>
                        <el-row :gutter="1">
                            <el-col :span="4">数 量：</el-col>
                            <el-col :span="20">
                                <el-input-number v-model="num" @change="handleChange" size="small" :min="1" :max="10"
                                    label="描述文字"></el-input-number>
                                <span class="text">
                                    <i v-if="num < 50">有库存</i>
                                    <i v-else-if="num > 50 && num < 100">库存紧张</i>
                                    <i v-else>限购100单</i>
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button-group>
                    <el-button type="danger" @click="buy">立即购买</el-button>
                    <el-button type="warning" @click="cart">加入购物车</el-button>
                </el-button-group>
            </div>

        </el-dialog>
        <!-- <el-dialog title="" :visible.sync="visible" width="15%" :showClose="false">
            <el-result icon="success" title="加入购物" subTitle="请根据提示进行操作"></el-result>
        </el-dialog> -->
    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
    name: 'GoodsDetail',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            dialogVisible: false,
            goods: {},
            num: 1,
            visible: false,
            isPay: 0,
            active: 1,
        }
    },
    computed: {
        // ...mapState('goodsStore', ['num']),
        price() {
            return (this.goods.price * this.num).toFixed(2)
        }
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('isGoodsShow', this.goodsShow)
        this.$bus.$on('goods', this.good)
    },
    methods: {
        ...mapMutations('goodsStore', ['numChange', 'getGoodsData']),
        ...mapMutations('cartStore', ['addToCart']),
        handleChange(num) {
            this.numChange(num)
        },
        goodsShow(val) {
            this.dialogVisible = val
        },
        good(goods) {
            this.goods = goods
        },
        buy() {
            this.$router.push({
                path: '/confirm_order',
                query: {
                    id: this.goods.id,
                    num: this.num
                }
            })
            this.getGoodsData(this.goods.id)
            localStorage.setItem('isPay', JSON.stringify(this.isPay))
            localStorage.setItem('active', JSON.stringify(this.active))
            this.dialogVisible = false

        },
        cart() {
            const good = {
                "productId": this.goods.id,
                "productQty": this.num
            }
            this.addToCart(good)

            this.getGoodsData(this.goods.id)
            this.dialogVisible = false
            this.visible = true
            if (this.visible = true) {
                setInterval(() => {
                    this.visible = false
                }, 1500)
            }
            this.$message({
                type: 'success',
                message: '加入购物车成功~'
            })
        }
    },
    beforeDestroy() {
        this.$bus.$off(['goods', 'isGoodsShow'])
    }
};
</script>
<style lang='less' scoped>
.goods-detail {

    .content {
        padding-bottom: 30px;

        display: flex;
        justify-content: space-between;

        .left {
            width: 50%;
            padding: 10px;
            background-color: white;

            img {
                width: 300px;
                height: 100%;
                border-radius: 3px;
                border: 1px solid #c1c0c0;
            }
        }

        .right {
            width: 50%;
            padding: 10px 0;
            background-color: white;

            .title {
                width: 350px;
                overflow: hidden;
                text-overflow: ellipsis;
                text-wrap: nowrap;
                background-color: white;
                font-size: 24px;
                font-weight: bold;
                color: #333;
                padding-bottom: 20px;
            }

            .saleNum {
                font-size: 13px;
                padding-bottom: 10px;
            }

            .price {
                color: red;
                line-height: 40px;
                font-size: 30px;

                span {
                    font-size: 14px;
                    font-weight: bold;
                }

                i {
                    font-size: 14px;

                }
            }

            .select {
                font-size: 14px;
                line-height: 50px;

                .text {
                    font-size: 12px;
                    margin-left: 10px;
                    color: #c1c0c0;
                }

                .font {
                    color: #c1c0c0;
                }
            }
        }
    }

    .btn {
        padding-bottom: 30px;
        padding-left: 360px;
    }
}
</style>